<template>
	<view class="container">
		<view class="header">
			<view class="nav-bar">
				<view class="nav-left" @click="goBack">
					<view class="back-arrow"></view>
				</view>
				<view class="nav-title">订单详情</view>
				<view class="nav-right"></view>
			</view>
		</view>

		<scroll-view class="content" scroll-y>
			<!-- 支付成功和门店信息卡片（蓝色背景） -->
			<view class="success-store-card">
				<view class="success-tip">支付成功，请您就近赶往门店消费</view>
				<view class="store-info-row">
					<image class="store-icon" src="/static/image/carmaintenance/商家1@3x.png" mode="aspectFit"></image>
					<view class="store-info">
						<text class="store-name">伟业汽车美容店 (人民路店)</text>
						<text class="store-addr">山阳区人民中路33号</text>
					</view>
					<image class="nav-btn" src="/static/image/carmaintenance/plane1@3x.png" mode="aspectFit" @click="navigateToStore"></image>
				</view>
			</view>

			<!-- 订单详情卡片 -->
			<view class="order-card">
				<view class="card-title">订单详情</view>
				<view class="detail-item">
					<text class="detail-label">车辆精洗</text>
					<text class="detail-value">¥39.90</text>
				</view>
				<view class="detail-item">
					<text class="detail-label">车辆附加费用</text>
					<text class="detail-value">0</text>
				</view>
				<view class="divider"></view>
				<view class="detail-item">
					<text class="detail-label">原价</text>
					<text class="detail-value price-original">¥59.90</text>
				</view>
				<view class="detail-item">
					<text class="detail-label">店家优惠</text>
					<text class="detail-value price-discount">-¥20</text>
				</view>
				<view class="detail-item">
					<text class="detail-label">优惠券</text>
					<text class="detail-value price-discount">-¥10</text>
				</view>
				<view class="divider"></view>
				<view class="detail-item total-row">
					<text class="detail-label">支付金额</text>
					<text class="detail-value price-paid">¥29.9</text>
				</view>
			</view>

			<!-- 订单信息卡片 -->
			<view class="order-card">
				<view class="card-title">订单信息</view>
				<view class="info-item">
					<text class="info-label">订单号:</text>
					<text class="info-value">{{ orderNo || '121212112487878' }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">下单时间:</text>
					<text class="info-value">{{ nowText }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">预约时间:</text>
					<text class="info-value">{{ reserveText }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">车辆:</text>
					<text class="info-value">奔驰FWE4/豫A98FHJ</text>
				</view>
				<view class="info-item">
					<text class="info-label">备注:</text>
					<text class="info-value">—</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const amount = ref('0.00');
const orderNo = ref('');

onLoad((q) => {
	amount.value = q.amount || '0.00';
	orderNo.value = q.orderNo || '';
});

const nowText = computed(() => {
	const n = new Date();
	const y = n.getFullYear();
	const m = (n.getMonth()+1).toString().padStart(2,'0');
	const d = n.getDate().toString().padStart(2,'0');
	const hh = n.getHours().toString().padStart(2,'0');
	const mm = n.getMinutes().toString().padStart(2,'0');
	return `${y}.${m}.${d}  ${hh}:${mm}`;
});

const reserveText = computed(() => {
	const n = new Date();
	n.setDate(n.getDate()+1);
	const y = n.getFullYear();
	const m = (n.getMonth()+1).toString().padStart(2,'0');
	const d = n.getDate().toString().padStart(2,'0');
	return `${y}.${m}.${d}  13:40`;
});

const goBack = () => uni.navigateBack();

const navigateToStore = () => {
	uni.navigateTo({
		url: '/pages/index/carMaintenance/navigation'
	});
};
</script>

<style scoped>
.container {
	width: 100%;
	min-height: 100vh;
	background: #f5f5f5;
	display: flex;
	flex-direction: column;
}

.header {
	background: linear-gradient(180deg, #2477F4 0%, #166BEC 100%);
	padding-top: 30rpx;
	padding-bottom: 30rpx;
	flex-shrink: 0;
}

.nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	padding-top: calc(20rpx + env(safe-area-inset-top));
}

.nav-left {
	width: 80rpx;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.back-arrow {
	width: 24rpx;
	height: 24rpx;
	border-left: 4rpx solid #fff;
	border-bottom: 4rpx solid #fff;
	transform: rotate(45deg);
	margin-left: 10rpx;
}

.nav-title {
	flex: 1;
	text-align: center;
	font-size: 36rpx;
	font-weight: 500;
	color: #fff;
}

.nav-right {
	width: 80rpx;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8rpx;
}

.content {
	flex: 1;
	height: 0;
	overflow-y: auto;
}

/* 支付成功和门店信息卡片（蓝色背景） */
.success-store-card {
	background: linear-gradient(180deg, #2477F4 0%, #166BEC 100%);
	padding: 20rpx 24rpx 24rpx;
}

.success-tip {
	font-size: 24rpx;
	color: #eaf1ff;
	text-align: left;
	margin: 8rpx 6rpx 18rpx;
}

.store-info-row {
	display: flex;
	align-items: center;
	gap: 16rpx;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 12rpx;
	padding: 14rpx 16rpx;
}

.store-icon {
	width: 48rpx;
	height: 48rpx;
	flex-shrink: 0;
}

.store-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.store-name {
	font-size: 32rpx;
	color: #fff;
	font-weight: 500;
}

.store-addr {
	font-size: 26rpx;
	color: rgba(255, 255, 255, 0.9);
}

.nav-btn {
	width: 44rpx;
	height: 44rpx;
	flex-shrink: 0;
	cursor: pointer;
}

/* 订单详情和信息卡片 */
.order-card {
	background: #fff;
	border-radius: 20rpx;
	margin: 20rpx 30rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.card-title {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
	margin-bottom: 20rpx;
}

/* 订单详情样式 */
.detail-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
}

.detail-label {
	font-size: 28rpx;
	color: #666;
}

.detail-value {
	font-size: 28rpx;
	color: #333;
}

.price-original {
	color: #333;
}

.price-discount {
	color: #FF6B35;
}

.price-paid {
	color: #4CD964;
	font-weight: 600;
	font-size: 32rpx;
}

.total-row {
	border-top: 1rpx solid #f0f0f0;
	margin-top: 10rpx;
	padding-top: 24rpx;
}

.divider {
	height: 1rpx;
	background: #f0f0f0;
	margin: 10rpx 0;
}

/* 订单信息样式 */
.info-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.info-item:last-child {
	border-bottom: none;
}

.info-label {
	font-size: 28rpx;
	color: #666;
}

.info-value {
	font-size: 28rpx;
	color: #333;
}
</style>

